/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2022-12-27 14:48:40
 * @LastEditors: huangtianyang
 * @LastEditTime: 2022-12-27 18:27:17
 * @FilePath: \cxl-admin\src\views\index\chart.ts
 */

import * as echarts from 'echarts'
type EChartsOption = echarts.EChartsOption

export class DrawBarChart {
    option: EChartsOption
    myChart: echarts.ECharts
    constructor(id: string, title: string, xAxisData: string[], seriesData: number[]) {
        const chartDom = document.getElementById(id)!
        this.myChart = echarts.init(chartDom)

        //配置项
        this.option = {
            title: {
                text: title,
                textAlign: 'center',
                left: '50%'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxisData,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '总计',
                    type: 'bar',
                    barWidth: '60%',
                    data: seriesData,
                    backgroundStyle: {}
                }
            ],
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: '#01f2fe' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#0199fe' // 100% 处的颜色
                    }
                ],
                global: false // 缺省为 false
            }
        }

        this.option && this.myChart.setOption(this.option)
    }
    dispose() {
        this.myChart.dispose()
    }
}

export class DrawPieChart {
    option: EChartsOption
    myChart: echarts.ECharts
    constructor(id: string, title: string, data: any[]) {
        const chartDom = document.getElementById(id)!
        this.myChart = echarts.init(chartDom)

        //配置项
        this.option = {
            title: {
                text: title,
                textAlign: 'center',
                left: '50%'
            },
            tooltip: {
                trigger: 'item'
            },

            series: [
                {
                    name: title,
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 4,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        position: 'center',
                        formatter: '{b}: {c}'
                    },

                    labelLine: {
                        show: false
                    },
                    data: data
                }
            ]
        }

        this.option && this.myChart.setOption(this.option)
    }
    dispose() {
        this.myChart.dispose()
    }
}
